<template>
  <div class="recordBox">
    <div class="Headerclass21">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3">提现记录</span>
        </template>
      </el-page-header>
    </div>
    <div class="MainPrice">
      <a-timeline>
        <a-timeline-item class="Hei">
          <template #dot
            ><ClockCircleOutlined class="clock"
          /></template>
        </a-timeline-item>
        <a-timeline-item v-for="item in pay.list" :key="item.id" class="item-c">
          <b class="item-description">{{ item.time }}</b>
          <div class="item-content">
            <div class="Dip">
              <b class="first">{{ item.price }}元</b>
              <p class="Status">{{ item.status }}</p>
            </div>
            <p class="itemType">
              {{ item.type }}
            </p>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup>
import { ClockCircleOutlined } from "@ant-design/icons-vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const goBack = () => {
  router.go(-1);
};

const pay = reactive({
  list: [
    {
      id: 1,
      price: 20,
      status: "余额提现",
      type: "已提现",
      time: "2022-08-01",
    },
    {
      id: 2,
      price: 50,
      status: "余额提现",
      type: "已提现",
      time: "2021-07-01",
    },
    {
      id: 3,
      price: 20,
      status: "余额提现",
      type: "已提现",
      time: "2019-07-02",
    },
    {
      id: 4,
      price: 25,
      status: "余额提现",
      type: "已提现",
      time: "2016-03-02",
    },
  ],
});
</script>

<style lang="scss" scoped>
.recordBox {
  width: 100%;
  height: 100%;
}
.Hei {
  margin-top: 10px;
}
.first{
  color: red; 
  font-size: 24px
}
.clock{
  font-size: 30px
}
.itemType{
  color: blue; 
  margin-left: 10%
}
.Headerclass21 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.el-page-header__icon .el-icon {
  font-size: 30px !important;
}

.MainPrice {
  height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #fff;
}
.item-c {
  .item-description {
    margin-left: -10px;
    font-size: 16px;
    font-weight: 800;
  }
  .item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    height: 100px;
    border: 2px solid #cecdcd;
    border-radius: 10%;

    .Dip {
      display: flex;
      align-items: center;
      margin-left: 10%;
      width: 100%;
      .Status {
        color: #bdbaba;
        margin-left: 50px;
      }
    }
  }
}
main {
  height: 100%;
  overflow: scroll;
}
</style>
